<template>
  <div>
    <div class="header">
      <van-icon
        name="fenlei1"
        class-prefix="icon"
        class="cate"
        color="white"
      ></van-icon>
      <div class="search">
        <van-icon
          name="jingdong1"
          class="JD_icon"
          class-prefix="icon"
          color="red"
        ></van-icon>
        <!-- <van-icon name="search"  class-prefix='icon' size='26' color='#ccc'></van-icon> -->
        <van-search placeholder="请输入搜索关键词" />
      </div>
      <span class="login" @click="con">登录</span>
    </div>
    <slot name="red"></slot>
  </div>
</template>

<script>
import bus from './bus.js'
export default {
  methods: {
    con  () {
      bus.$emit('abc')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #c9261a;
  font-size: 0.26rem;
  .cate {
    padding: 0 0.1rem;
    font-size: 0.26rem;
  }
  .search {
    background-color: white;
    display: flex;
    padding: 0 0.1rem;
    height: 0.3rem;
    border-radius: 0.22rem;
    overflow: hidden;
    flex: 1;
    align-items: center;
    .JD_icon {
      font-size: 0.2rem;
    }
    /deep/ .van-search {
      padding: 0;
      height: 100%;
      border-radius: 0.22rem;
      flex: 1;
      .van-search__content {
        height: 100%;
        align-items: center;
        .van-cell {
          height: 100%;
          align-items: center;
        }
      }
      .van-icon-search {
        padding-left: 0.06rem;
        border-left: 2px solid #ccc;
      }
      .van-cell--borderless {
        padding: 0;
        .van-icon-search {
          font-size: 0.18rem;
        }
      }
    }
  }
  .login {
    font-size: 0.14rem;
    color: white;
    margin: 0 0.1rem;
  }
}
</style>
